<template>
    <div class="company-set lh40 pl10">
        <!-- 时长金额 -->
        <div class="pl10 pt10" style="position: relative;">
            <div class="list plr10 pt10 text-c">
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            订单号
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block text-l">
				            {{orderNo}}
				        </div> 
				    </div>
				</div>
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            购买内容
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block text-l">
				            {{orderContent}}
				        </div> 
				    </div>
				</div>
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            支付金额
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block text-l">
				            {{totalMoney}}
				        </div> 
				    </div>
				</div>
                <div class="flexlr borderT item">
                    <div class="menu pl10">
                        <div class="inline-block">
                            收件地址
                        </div>
                    </div>
                    <div class="duration-price pr10">
                        <div class="inline-block">
                            <el-input v-model="consigneeAddress" size="small" placeholder="请输入收件地址"></el-input>
                        </div> 
                    </div>
                </div>
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            收件人
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block">
				            <el-input v-model="consignee" size="small" placeholder="请输入收件人"></el-input>
				        </div> 
				    </div>
				</div>
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            联系电话
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block">
				            <el-input v-model="Phone" size="small" placeholder="请输入收件人联系电话"></el-input>
				        </div> 
				    </div>
				</div>
				<div class="flexlr borderT item">
				    <div class="menu pl10">
				        <div class="inline-block">
				            备注
				        </div>
				    </div>
				    <div class="duration-price pr10">
				        <div class="inline-block">
				            <el-input v-model="remarks" size="small" placeholder="备注"></el-input>
				        </div> 
				    </div>
				</div>
            </div>
            <div class="pt20 pl10">
                <el-button type="primary" plain size="small" @click="durationSubmit">确认开票</el-button>
            </div>
            <div class="pt20 pl10" style="position: absolute;right: 20px;top: 5px;">
                <el-button type="primary" plain size="small" @click="back">返回</el-button>
            </div>
        </div>
        <!-- 时长金额 -->
    </div>
</template>

<script >

export default {
    components: {

    },
    data: function () {
        return {
			orderNo: '',
			orderContent: '',
			totalMoney: '',
			consignee: '',
			consigneeAddress: '',
			Phone: '',
			remarks: ''
        }
    },
    computed: {
    },
    watch: {
    },
    created () {
		console.log(this.$route.query)
		this.orderNo = this.$route.query.orderNo
		this.orderContent = this.$route.query.orderContent
		this.totalMoney = this.$route.query.totalMoney
    },
    methods: {
        back () {
            this.$router.go(-1)
        },
        handleClick (tab, event) {
            console.log(tab.name, event)
        },
        themeSelectChange (value) {
            // 时长 选择主题
            this.themeSelectIndex = value
        },
        durationSubmit () {
            // 确认提交
            this.$message({
              message: '提交成功',
              type: 'success'
            })
        },
        // utils
        toJson (obj) {
            // json 转 字符串
            console.log(obj)
            // return JSON.stringify(obj)
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.title
    font-weight bold
// .list
//     width 600px
.item
    transition all 0.2s linear
    &:nth-child(2n)
        background #fafafa
    &:hover
        background #fafafa
.duration-price
    width 450px
.menu
    width 150px
.inline-block
    width 100%
.tip
    background #fdf6ec
    color #e6a23c
</style>
